<template>
    <!-- 工作台 -->
    <div class="work">
        <div class="padding15 flexstart">
            <div class="l">
                <div class="content marignTop15 flexstart" style="height:250px;box-sizing:border-box;">
                    <div class="bign">
                        <TitleNav title="发起签署">
                            <template v-slot:bign>
                                <div class="btn flexcolumn pointer" @click="initiate">
                                    <div class="text">
                                        <i class="el-icon-upload"></i>
                                        <span>上传文件</span>
                                    </div>
                                    <div class="txt">
                                        <span>直接发起签署</span>
                                    </div>
                                </div>
                                <!-- <div class="btn flexcolumn pointer" @click="selectTemplate">
                                    <div class="text">
                                        <i class="el-icon-star-on"></i>
                                        <span>选择模板</span>
                                    </div>
                                    <div class="txt">
                                        <span>通过模板发起签署</span>
                                    </div>
                                </div> -->
                            </template>
                        </TitleNav>
                    </div>
                    <div class="template">
                        <!-- <el-descriptions title="最近使用的模板"> -->
                            <el-descriptions title="文件类型">
                        </el-descriptions>
                        <div class="recent flexcolumn">
                            <img src="@/assets/img/system/placeholder.png" alt="">
                            <div class="empty">
                                <!-- <p style="color:#999;">最近60天无 使用记录，<span @click="goUseTemplate"
                                        class="create-template pointer">去使用模板</span></p> -->
                                <p style="color:#333;">可上传 pdf、doc、docx格式文件</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content marignTop15" style="height:286px;box-sizing:border-box;">
                    <TitleNav title="待我操作">
                        <template v-slot:guide>
                            <!-- <Tabs></Tabs> -->
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane :lazy="true" label="待我签署" name="first">

                                    <div class="recent flexcolumn" style="margin-top:30px;"
                                        v-show="tableDataSign.length == 0">
                                        <img src="@/assets/img/system/placeholder.png" alt="">
                                        <div class="empty">
                                            <p style="color:#999;">没有待我签署的任务</p>
                                        </div>
                                    </div>

                                    <el-table v-loading="loading1" v-show="tableDataSign.length !== 0" :data="tableDataSign"
                                        :show-header="false" :empty-text='emtypetxt' style="width: 100%;font-size:14px;">
                                        <el-table-column prop="contractName" label="合同文件名称">
                                        </el-table-column>
                                        <el-table-column label="姓名">
                                            <template slot-scope="scope">
                                                <div class="flexcolumn"
                                                    style="align-items:flex-start;padding-left:50%;font-size:14px;">
                                                    <p>发起方：{{ scope.row.userName }}</p>
                                                    <p>{{ scope.row.launchContractName }}</p>
                                                    <!-- <p>{{scope.row.}}</p> -->
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="btn" align="right">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary"
                                                    @click="handleEdit(scope.$index, scope.row)">
                                                    签署
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="lookAll pointer" v-if="tableDataSign.length>=3">
                                        查看全部 >
                                    </div> -->

                                </el-tab-pane>
                                <!-- <el-tab-pane :lazy="true" :label="'待我填写('+0+')'" name="second">
                                   <div class="recent flexcolumn" style="margin-top:30px;">
                                        <img src="@/assets/img/system/placeholder.png" alt="">
                                        <div class="empty">
                                            <p style="color:#999;">没有待我填写的任务</p>
                                        </div>
                                    </div>
                                </el-tab-pane> -->
                                <el-tab-pane :lazy="true" label="待我审批" name="third">
                                    <el-table v-loading="loading3" v-show="tableDataSign.length !== 0" :data="tableDataSign"
                                        :show-header="false" :empty-text='emtypetxt' style="width: 100%;font-size:14px;">
                                        <el-table-column prop="contractName" label="合同文件名称">
                                        </el-table-column>
                                        <el-table-column label="姓名">
                                            <template slot-scope="scope">
                                                <div class="flexcolumn"
                                                    style="align-items:flex-start;padding-left:50%;font-size:14px;">
                                                    <p>发起方：{{ scope.row.promoterName }}</p>
                                                    <p>{{ scope.row.promoterEnterprise }}</p>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="btn" align="right">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary"
                                                    @click="handleEdit3(scope.$index, scope.row)">
                                                    查看
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="lookAll pointer" v-if="tableDataSign.length>=3">
                                        查看全部 >
                                    </div> -->
                                    <div class="recent flexcolumn" style="margin-top:30px;"
                                        v-show="tableDataSign.length == 0">
                                        <img src="@/assets/img/system/placeholder.png" alt="">
                                        <div class="empty">
                                            <p style="color:#999;">没有待我审批的任务</p>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </TitleNav>
                </div>
                <div class="content marignTop15" style="height:286px;box-sizing:border-box;">
                    <TitleNav title="我发起的">
                        <template v-slot:guide>
                            <!-- <Tabs></Tabs> -->
                            <el-tabs v-model="activeName1" @tab-click="handleClick1">
                                <el-tab-pane :lazy="true" label="待处理" name="first">
                                    <div class="recent flexcolumn" style="margin-top:30px;"
                                        v-show="tableDataHandled.length == 0">
                                        <img src="@/assets/img/system/placeholder.png" alt="">
                                        <div class="empty">
                                            <p style="color:#999;">没有待处理的任务</p>
                                        </div>
                                    </div>
                                    <el-table v-loading="loading2" v-show="tableDataHandled.length !== 0"
                                        :data="tableDataHandled" :show-header="false" :empty-text='emtypetxt1'
                                        style="width: 100%;font-size:14px;">
                                        <el-table-column prop="contractName" label="合同文件名称">
                                        </el-table-column>
                                        <el-table-column label="姓名">
                                            <template slot-scope="scope">
                                                <div class="flexcolumn"
                                                    style="align-items:flex-start;padding-left:50%;font-size:14px;">
                                                    <p>待处理方：{{ scope.row.userName }}</p>
                                                    <p>{{ scope.row.launchContractName }}</p>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="btn" align="right">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary"
                                                    @click="handleEdit1(scope.$index, scope.row)">
                                                    查看
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="lookAll pointer" v-if="tableDataHandled.length >= 3">
                                        查看全部 >
                                    </div> -->
                                </el-tab-pane>
                                <el-tab-pane :lazy="true" label="待审批" name="second">
                                    <el-table v-loading="loading4" v-show="tableDataHandled.length !== 0"
                                        :data="tableDataHandled" :show-header="false" :empty-text='emtypetxt1'
                                        style="width: 100%;font-size:14px;">
                                        <el-table-column prop="contractName" label="合同文件名称">
                                        </el-table-column>
                                        <el-table-column label="姓名">
                                            <template slot-scope="scope">
                                                <div class="flexcolumn"
                                                    style="align-items:flex-start;padding-left:50%;font-size:14px;">
                                                    <p>待处理方：{{ scope.row.launchContractName }}</p>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="btn" align="right">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary"
                                                    @click="handleEdit4(scope.$index, scope.row)">
                                                    查看
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="lookAll pointer" v-if="tableDataHandled.length >= 3">
                                        查看全部 >
                                    </div> -->
                                    <div class="recent flexcolumn" style="margin-top:30px;"
                                        v-show="tableDataHandled.length == 0">
                                        <img src="@/assets/img/system/placeholder.png" alt="">
                                        <div class="empty">
                                            <p style="color:#999;">没有待审批的任务</p>
                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane :lazy="true" label="草稿" name="third">
                                    <el-table v-loading="loading5" v-show="tableDataHandled.length !== 0"
                                        :data="tableDataHandled" :show-header="false" :empty-text='emtypetxt1'
                                        style="width: 100%">
                                        <el-table-column prop="contractName" label="合同文件名称">
                                        </el-table-column>
                                        <el-table-column label="姓名">
                                            <template slot-scope="scope">
                                                <div class="flexcolumn"
                                                    style="align-items:flex-start;padding-left:50%;font-size:12px;">
                                                    <p>待处理方：{{ scope.row.launchContractName }}</p>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="btn" align="right">
                                            <template slot-scope="scope">
                                                <el-button size="mini" type="primary"
                                                    @click="handleEdit1(scope.$index, scope.row)">
                                                    查看
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <div class="lookAll pointer" v-if="tableDataHandled.length >= 3">
                                        查看全部 >
                                    </div> -->
                                    <div class="recent flexcolumn" style="margin-top:30px;"
                                        v-show="tableDataHandled.length == 0">
                                        <img src="@/assets/img/system/placeholder.png" alt="">
                                        <div class="empty">
                                            <p style="color:#999;">没有草稿</p>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </TitleNav>
                </div>
            </div>
            <div class="r">
                <div class="content marignTop15" style="padding:0;height:250px;">
                    <div class="head flexleft">
                        <div class="firmLogo">
                            <img :src="userinfo.userHeadimg" alt="">
                        </div>
                        <div class="firmdic">
                            <p>欢迎您，{{ clientHome.userName }}</p>
                            <p v-if="clientHome.mainBodyType == 0">
                                个人空间
                                <span v-if="clientHome.isRealname == 1" class="tebtext"> 已实名</span>
                                <span v-if="clientHome.isRealname == 0" class="tebtext pointer" @click="PersonCertificat"><i
                                        class="el-icon-warning" style="color:#999;"></i> 未认证，点击认证</span>
                            </p>
                            <p v-if="clientHome.mainBodyType == 1">{{ clientHome.enterpriseName }}</p>
                        </div>
                    </div>
                    <div class="main">
                        <p v-if="clientHome.mainBodyType == 1">企业管理员： <span>{{ clientHome.adminName }}</span></p>
                        <p>可签署份数：<span>{{ clientHome.signNum }} 次</span></p>
                        <!-- <p v-if="clientHome.mainBodyType==1">剩余鸿签次数：<span>{{clientHome.signNum}} 次</span></p> -->
                    </div>
                    <div v-if="clientHome.mainBodyType == 1" class="link flexcenter pointer" @click="goBusiness">
                        <p>进入企业控制台 ></p>
                    </div>
                    <div v-if="clientHome.mainBodyType == 0 && clientHome.isRealname == 1" class="link flexcenter pointer"
                        @click="goUser">
                        <p>用户中心 ></p>
                    </div>
                    <div v-if="clientHome.mainBodyType == 0 && clientHome.isRealname == 0" class="link flexcenter pointer"
                        @click="PersonCertificat">
                        <p>去认证 ></p>
                    </div>
                </div>
                <div class="content marignTop15 help" style="height:422px;box-sizing:border-box;">
                    <TitleNav title="帮助中心" style=""></TitleNav>
                    <base-question path="index" />
                </div>
                <div class="workpic marignTop15 pointer">

                    <!-- <el-carousel height="150px" arrow="never">
                        <el-carousel-item v-for="(item) in bannerList" :key="item.id">
                             <a :href="item.bannerUrl">
                                <img :src="item.showImg" alt="" style="width: 100%;height: 100%;"/>
                             </a>
                        </el-carousel-item>
                    </el-carousel> -->
                    <img src="../../assets/img/layout/work.png" alt="">
                </div>
            </div>
        </div>
        <!-- 未进行实名认证展示此弹框 -->
        <el-dialog :visible.sync="realNameshow" width="25%" :before-close="handleClose">
            <div class="scancertificat">
                <p class="titletext">根据《电子签名法》实名用户才能签署</p>
                <p class="margin-top1">使用微信或其他app扫描二维码进行刷脸认证</p>
                <div class="flexcenter margin-top4">
                    <el-button type="primary" @click="PersonCertificat">去实名认证</el-button>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import TitleNav from './components/TitleNav.vue'
import Tabs from './components/tabs.vue'
import { index, signatoryList, sealAuditList, queryDraftPageList } from '@/api/work'
import BaseQuestion from "@/components/BaseQuestion.vue";
// import Cookies from 'js-cookie'//获取cookies的信息

export default {
    name: 'work',
    components: {
        BaseQuestion,
        Tabs,
        TitleNav,
    },
    data() {
        return {
            loading1: '',//待我签署
            loading2: '',//待处理
            loading3: '',//待我审批
            loading4: '',// 待审批
            loading5: '',// 草稿

            activeName: 'first',
            activeName1: 'first',
            realNameshow: false,
            emtypetxt: '',
            emtypetxt1: '',

            totalSign: "",
            tableDataSign: [],
            totalHandled: '',
            tableDataHandled: [],
            // 帮助中心
            helpList: [],
            clientHome: {},
            bannerList: [],
            userinfo: {}
        };
    },
    mounted() {
        this.init()
        if (this.$store.state.user.userInfomsg.isRealname != 0) {
            this.getSignatoryListSign()
            this.getSignatoryListHandled()
        }
        this.getUserinfo()
    },
    methods: {
        //直接发起签署
        initiate(){
            this.$router.push({
                path:'/initiate',
            })
        },
        getUserinfo() {
            let _this = this
            this.$store.dispatch("user/getUserInfo").then(res => {
                _this.userinfo = _this.$store.state.user.userInfomsg
            })
        },
        goUser() {
            this.$router.push({ name: 'person' }, () => { })
        },
        // 工作台
        init() {
            index().then(res => {
                this.clientHome = res.result
                this.helpList = res.result.helpList
                this.bannerList = res.result.bannerList

                if (this.clientHome.isRealname == 0) {
                    this.realNameshow = true
                }
            })
        },


        // 待我签署
        getSignatoryListSign() {
            this.emtypetxt = '加载中...';
            this.loading1 = true
            signatoryList({
                tableNum: 2,// 1我发起的 待处理  2待我签署
                // pageNo: 1,
                // pageSize: 3
            }).then(res => {
                this.tableDataSign = []
                this.totalSign = null
                this.tableDataSign = res.result.records.slice(0, 3)
                this.totalSign = res.result.total
                if (this.tableDataSign.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
                this.loading1 = false
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 待处理
        getSignatoryListHandled() {
            this.emtypetxt1 = '加载中...';
            this.loading2 = true
            signatoryList({
                tableNum: 1,// 1我发起的 待处理  2待我签署
                // pageNo: 1,
                // pageSize: 3
            }).then(res => {
                this.tableDataHandled = []
                this.totalHandled = null
                this.tableDataHandled = res.result.records.slice(0, 3)
                this.totalHandled = res.result.total
                if (this.tableDataHandled.length == 0) {
                    this.emtypetxt1 = '暂无数据'
                }
                this.loading2 = false
            }).catch(err => {
                console.log("请求失败", err)
            })
        },

        // 待我审批
        getSealAuditListSign() {
            this.emtypetxt = '加载中...';
            this.loading3 = true
            sealAuditList({
                suditSealType: 1,
                // pageNo: 1,
                // pageSize: 3
            }).then(res => {
                this.tableDataSign = []
                this.totalSign = null
                this.tableDataSign = res.result.records.slice(0, 3)
                this.totalSign = res.result.total
                if (this.tableDataSign.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
                this.loading3 = false
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 待审批
        getSealAuditListHandled() {
            this.emtypetxt1 = '加载中...';
            this.loading4 = true
            sealAuditList({
                suditSealType: 2,
                // pageNo: 1,
                // pageSize: 3
            }).then(res => {
                this.tableDataHandled = []
                this.totalHandled = null
                this.tableDataHandled = res.result.records.slice(0, 3)
                this.totalHandled = res.result.total
                if (this.tableDataHandled.length == 0) {
                    this.emtypetxt1 = '暂无数据'
                }
                this.loading4 = false
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 草稿
        getQueryDraftPageListHandled() {
            this.emtypetxt1 = '加载中...';
            this.loading5 = true
            queryDraftPageList({
                // suditSealType:2,
                // pageNo: 1,
                // pageSize: 3
            }).then(res => {
                this.tableDataHandled = []
                this.totalHandled = null
                this.tableDataHandled = res.result.records.slice(0, 3)
                this.totalHandled = res.result.total
                if (this.tableDataHandled.length == 0) {
                    this.emtypetxt1 = '暂无数据'
                }
                this.loading5 = false
            }).catch(err => {
                console.log("请求失败", err)
            })
        },

        handleClose(done) {
            done();
        },
        // 个人认证
        PersonCertificat() {
            this.$router.push({ path: "/PersonCertificat" }, () => { })
        },
        goBusiness() {
            this.$router.push({ name: 'business' }, () => { })
        },
        handleClick(tab, event) {
            console.log(tab, event);
            if (tab.name == "third") {
                this.getSealAuditListSign()
            } else if (tab.name == "first") {
                this.getSignatoryListSign()
            }
        },
        handleClick1(tab, event) {
            console.log(tab, event);
            if (tab.name == "second") {
                this.getSealAuditListHandled()
            } else if (tab.name == "first") {
                this.getSignatoryListHandled()
            } else if (tab.name == 'third') {
                this.getQueryDraftPageListHandled()
            }
        },
        handleEdit(index, row) {
            console.log(index, row);
            this.$router.push({ path: "/SignDocument", query: { id: row.signContractId } }, () => { })
        },
        handleEdit1(index, row) {
            console.log(index, row);
            console.log(index, row);
            this.$router.push({ path: "/SignDocument", query: { id: row.signContractId } }, () => { })
        },
        handleEdit3(index, row) {
            console.log(index, row);
            console.log(index, row);
            this.$router.push({ name: "seal", query: { suditSealType: 1 } }, () => { })
        },
        handleEdit4(index, row) {
            console.log(index, row);
            console.log(index, row);
            this.$router.push({ name: "seal", query: { suditSealType: 2 } }, () => { })
        },
        // 上传文件
        upFile() {
            this.$emit('isRealname')
        },
        // 选择模版
        selectTemplate() {
            this.$emit('isRealname')
        },
        // 去使用模版
        goUseTemplate() {
            this.$emit('isRealname')
        },
    }
}
</script>

<style lang="scss">
.template {
    .el-descriptions__title {
        color: #999;
        font-size: 14px;
    }
}

.work {
    .el-tabs__item.is-active {
        color: #1063F1;
    }

    .el-tabs__active-bar {
        background-color: #1063F1;
    }

    .l .content:nth-child(2) .el-descriptions__header {
        margin-bottom: 0;
    }

    .l .content:nth-child(3) .el-descriptions__header {
        margin-bottom: 0;
    }

    .r .el-link--inner {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .el-tabs__header {
        margin: 0;
    }

    .el-table .cell {
        line-height: 20px;
    }
}
</style>

<style lang="scss" scoped>
.scancertificat {
    text-align: center;
    padding: 50px 0 50px;
}

.work {
    .content {
        padding: 20px;
        border-radius: 5px;
        background-color: #fff;
    }

    .l {
        width: 80%;
        margin-right: 15px;

        .bign {
            max-width: 300px;

            .btn {
                width: 192px;
                height: 55px;
                border-radius: 5px;
                margin-left: 24px;
                color: #FFFFFF;

                .text {
                    font-size: 14px;
                }

                .txt {
                    font-size: 12px;
                }
            }

            .btn:nth-child(2) {
                // margin-top: 10px;
                background: linear-gradient(90deg, #2F6EFF, #0144DC);
            }

            .btn:nth-child(3) {
                margin-top: 24px;
                background: linear-gradient(90deg, #23BDFF, #0192E4);
            }
        }

        .template {
            flex-grow: 1;

        }

        .recent {
            margin-top: 10px;

            .empty {
                margin-top: 16px;
                text-align: center;

                p {
                    font-size: 14px;
                }

                .create-template {
                    color: #2C75F2;
                }
            }
        }

        .lookAll {
            text-align: center;
            color: #0144DC;
            font-size: 14px;
            margin-top: 10px;
        }
    }

    .r {
        width: 20%;

        .head {
            height: 81px;
            border-bottom: 1px solid #F2F3F5;
            padding: 20px;
            box-sizing: border-box;

            .firmLogo {
                width: 42px;
                height: 42px;
                margin-right: 10px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .firmdic {
                font-size: 14px;
                color: #666666;
            }
        }

        .main {
            height: 114px;
            padding: 20px;
            font-size: 14px;
            border-bottom: 1px solid #F2F3F5;
            box-sizing: border-box;
            color: #666666;

            span {
                color: #222;
            }
        }

        .link {
            height: 70px;
            font-size: 14px;
            color: #1D6BF1;
        }

        .help {
            .flexbetween {
                padding: 5px 0;
            }

            :deep(.el-descriptions__header) {
                margin-bottom: 0;
            }
        }

        .workpic {
            height: 150px;
            border-radius: 5px;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}</style>